<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.regist {
  header {
    h4 {
      font-weight: normal;
      font-size: 18px;
      margin: 0;
      padding: 14px 0;
      overflow: hidden;
      i {
        color: #409eff;
        font-size: 24px;
        display: block;
        float: left;
        margin-right: 10px;
      }
    }
    .steps {
      width: 600px;
      margin: 20px auto;
      .el-step__title.is-process {
        color: #aaa;
        font-weight: normal;
      }
      .el-step__head.is-process {
        border-color: #aaa;
      }
    }
  }
  .rgbody {
    margin-top: 40px;
    margin-bottom: 100px;
  }
  .rgbodyl {
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    padding-right: 10px;
    padding-top: 30px;
  }
  .noline {
    line-height: 20px;
    color: #999;
  }
  .tixing {
    color: #666;
    margin-bottom: 40px;
    i {
      color: #999;
    }
  }
  .xieyi {
    color: rgb(5, 46, 134);
  }
  .rinput {
    width: 380px;
  }
  .rgbtn {
    padding: 8px 40px;
  }
}
</style>
<template>
  <div class="regist">
    <div class="nor-box">
      <div class="nor-body">
        <header>
        <div class="steps">
          <el-steps :active="1" simple>
            <el-step title="信息填写"></el-step>
            <el-step title="小程序绑定"></el-step>
            <el-step title="完成注册"></el-step>
          </el-steps>
        </div>
        </header>
        <div class="rgbody">
          <el-row>
            <el-col class="rgbodyl" :span="10" :offset="2">
              <div class="tixing">
                 确保手机号的唯一性  <i class="el-icon-info"></i>
              </div>
              <el-form :rules="rules" ref="form" label-position="left" :model="form" label-width="100px">
                <el-form-item label="手机号" prop="username">
                  <el-input size="small" class="rinput" clearable v-model="form.username"></el-input>
                   <el-button style="margin-left:10px;margin-bottom:4px;" size="small" type="primary">发送验证码</el-button>
                  <div class="noline">作为登录帐号，请填写未被壹字码平台注册的手机号。</div>
                </el-form-item>
                <el-form-item label="手机验证码" prop="code">
                  <el-input size="small" class="rinput"  v-model="form.code"></el-input>
                   <div class="noline">填写手机上收到的6位验证码</div>
                </el-form-item>
                 <el-form-item label="密码" prop="password">
                  <el-input size="small"  type="password" clearable class="rinput"  v-model="form.password"></el-input>
                   <div class="noline">字母、数字或者英文符号，最短8位，区分大小写</div>
                </el-form-item>
                 <el-form-item label="确认密码"  prop="retrue">
                  <el-input size="small"  type="password" clearable class="rinput"  v-model="form.retrue"></el-input>
                   <div class="noline">请再次输入密码</div>
                </el-form-item>
                 <el-form-item prop="checked">
                  <el-checkbox v-model="form.checked">我同意并遵守<span class="xieyi">《壹字码网络平台服务协议》</span></el-checkbox>
                </el-form-item>
                <el-form-item>
                  <el-button class="rgbtn" size="small" type="primary" @click="onSubmit">注册</el-button>
                  <el-button class="rgbtn" size="small" @click="goto('/')">取消</el-button>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <div style="text-align:center;">
                已有微信公众帐号？
                <el-button @click="goto('/')" type="text">立即登录</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "regist",
  data() {
    return {
      form: {
        username:"",
        code: "",
        password: "",
        retrue: "",
        checked:false
      },
      rules: {
        username: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "长度为11个字符", trigger: "blur" },
        ],
        code:[
           { required: true, message: "请输入验证码", trigger: "blur" },
           { min: 4, max: 4, message: "验证码长度为4个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度在 6 到 12个字符", trigger: "blur" }
        ],
        retrue: { required: true, message: "请再次输入登录密码", trigger: "blur" },
      }
    };
  },
  mounted() {
    this.$store.commit("cactiveIndex", "110");
  },
  methods: {
    async onSubmit() {
      try {
         this.$refs.form.validate(async(valid) => {
          if (valid) {
            if(!this.form.checked){
              this.$message('请同意并且遵守协议');
              return null;
            }
             if(this.form.password==this.form.retrue){
               let result = await this.$http.post("/admin/add", this.form);
               if(result.data.data==1){
                  this.$message({
                    message: '恭喜你，注册成功',
                    type: 'success'
                  });
                  this.$refs.form.resetFields();
                  this.goto('/')
               }else if(result.data.data==2){
                  this.$message('账号已被注册');
               }else{
                  this.$message('两次密码不对');
               }
             }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
       
      } catch (error) {}
    }
  }
};
</script>